import React, { useState, useEffect } from 'react';
import {
  View,
  Text,
  ScrollView,
  TouchableOpacity,
  StyleSheet,
  Alert,
  Image,
  Dimensions,
  ActivityIndicator,
  Modal,
} from 'react-native';
import { launchCamera, launchImageLibrary } from 'react-native-image-picker';

const { width } = Dimensions.get('window');

interface ValuationResult {
  estimatedPrice: number;
  confidence: number;
  factors: string[];
  timeToProcess: number;
}

interface MarketData {
  averagePrice: number;
  priceRange: { min: number; max: number };
  marketTrend: 'up' | 'down' | 'stable';
  lastUpdate: string;
}

interface RecycleBooking {
  id: string;
  status: string;
  estimatedTime: string;
  currentStep: number;
}

// 简化的选择器组件
const SimplePicker: React.FC<{
  label: string;
  value: string;
  options: { label: string; value: string }[];
  onValueChange: (value: string) => void;
}> = ({ label, value, options, onValueChange }) => {
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View style={styles.formRow}>
      <Text style={styles.formLabel}>{label}:</Text>
      <TouchableOpacity 
        style={styles.pickerButton}
        onPress={() => setModalVisible(true)}
      >
        <Text style={styles.pickerButtonText}>
          {value || `请选择${label}`}
        </Text>
        <Text style={styles.chevron}>▼</Text>
      </TouchableOpacity>
      
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => setModalVisible(false)}
      >
        <View style={styles.modalOverlay}>
          <View style={styles.modalContent}>
            <View style={styles.modalHeader}>
              <Text style={styles.modalTitle}>选择{label}</Text>
              <TouchableOpacity onPress={() => setModalVisible(false)}>
                <Text style={styles.closeButton}>✕</Text>
              </TouchableOpacity>
            </View>
            <ScrollView style={styles.optionsList}>
              {options.map((option, index) => (
                <TouchableOpacity
                  key={index}
                  style={styles.optionItem}
                  onPress={() => {
                    onValueChange(option.value);
                    setModalVisible(false);
                  }}
                >
                  <Text style={styles.optionText}>{option.label}</Text>
                  {value === option.value && (
                    <Text style={styles.selectedIcon}>✓</Text>
                  )}
                </TouchableOpacity>
              ))}
            </ScrollView>
          </View>
        </View>
      </Modal>
    </View>
  );
};

const RapidRecycleScreen: React.FC = () => {
  const [activeTab, setActiveTab] = useState('valuation');
  const [vehicleImages, setVehicleImages] = useState<string[]>([]);
  const [valuationResult, setValuationResult] = useState<ValuationResult | null>(null);
  const [isValuating, setIsValuating] = useState(false);
  const [marketData, setMarketData] = useState<MarketData | null>(null);
  const [selectedTime, setSelectedTime] = useState('today');
  const [selectedLocation, setSelectedLocation] = useState('home');
  const [vehicleInfo, setVehicleInfo] = useState({
    brand: '',
    model: '',
    year: '',
    mileage: '',
    condition: 'good'
  });
  const [recycleProgress, setRecycleProgress] = useState<RecycleBooking | null>(null);
  const [currentStep, setCurrentStep] = useState(0);

  const recycleSteps = [
    '预约确认',
    '评估师出发',
    '现场评估',
    '价格确认',
    '车辆回收',
    '款项到账'
  ];

  // 选项数据
  const brandOptions = [
    { label: '比亚迪', value: '比亚迪' },
    { label: '特斯拉', value: '特斯拉' },
    { label: '蔚来', value: '蔚来' },
    { label: '小鹏', value: '小鹏' },
    { label: '理想', value: '理想' },
  ];

  const modelOptions = [
    { label: 'Model 3', value: 'Model 3' },
    { label: 'Model Y', value: 'Model Y' },
    { label: '汉', value: '汉' },
    { label: '唐', value: '唐' },
    { label: 'ES6', value: 'ES6' },
  ];

  const conditionOptions = [
    { label: '优秀', value: 'excellent' },
    { label: '良好', value: 'good' },
    { label: '一般', value: 'fair' },
    { label: '较差', value: 'poor' },
  ];

  const timeOptions = [
    { label: '今天', value: 'today' },
    { label: '明天', value: 'tomorrow' },
    { label: '后天', value: 'dayAfter' },
    { label: '自定义时间', value: 'custom' },
  ];

  const locationOptions = [
    { label: '上门回收', value: 'home' },
    { label: '指定地点', value: 'location' },
    { label: '公司地址', value: 'company' },
  ];

  // 模拟市场数据
  useEffect(() => {
    const mockMarketData: MarketData = {
      averagePrice: 85000,
      priceRange: { min: 70000, max: 100000 },
      marketTrend: 'up',
      lastUpdate: new Date().toLocaleTimeString()
    };
    setMarketData(mockMarketData);
  }, []);

  // 模拟进度更新
  useEffect(() => {
    if (recycleProgress) {
      const progressInterval = setInterval(() => {
        setCurrentStep(prev => {
          if (prev < recycleSteps.length - 1) {
            return prev + 1;
          }
          return prev;
        });
      }, 3000);
      
      return () => clearInterval(progressInterval);
    }
  }, [recycleProgress]);

  // 拍照估价
  const takePhoto = async () => {
    try {
      const result = await launchCamera({
        mediaType: 'photo',
        quality: 0.8,
        maxWidth: 800,
        maxHeight: 600,
      });

      if (result.assets && result.assets[0]) {
        setVehicleImages(prev => [...prev, result.assets![0].uri!]);
      }
    } catch (error) {
      Alert.alert('错误', '拍照失败，请重试');
    }
  };

  // 选择图片
  const selectImage = async () => {
    try {
      const result = await launchImageLibrary({
        mediaType: 'photo',
        quality: 0.8,
        maxWidth: 800,
        maxHeight: 600,
        selectionLimit: 5,
      });

      if (result.assets) {
        const newImages = result.assets.map(asset => asset.uri!).filter(Boolean);
        setVehicleImages(prev => [...prev, ...newImages]);
      }
    } catch (error) {
      Alert.alert('错误', '选择图片失败，请重试');
    }
  };

  // AI快速估价
  const performAIQuickValuation = async () => {
    if (vehicleImages.length === 0) {
      Alert.alert('提示', '请先上传车辆图片');
      return;
    }

    setIsValuating(true);
    
    // 模拟AI估价过程
    setTimeout(() => {
      const mockResult: ValuationResult = {
        estimatedPrice: Math.floor(Math.random() * 50000) + 50000,
        confidence: Math.floor(Math.random() * 30) + 70,
        factors: ['车况良好', '里程适中', '市场热门'],
        timeToProcess: 2.5
      };
      
      setValuationResult(mockResult);
      setIsValuating(false);
      Alert.alert('估价完成', `AI估价：¥${mockResult.estimatedPrice.toLocaleString()}`);
    }, 2000);
  };

  // 预约回收
  const bookRecycle = async () => {
    if (!vehicleInfo.brand || !vehicleInfo.model) {
      Alert.alert('提示', '请填写完整的车辆信息');
      return;
    }

    const mockBooking: RecycleBooking = {
      id: `RC${Date.now()}`,
      status: 'confirmed',
      estimatedTime: '1小时内',
      currentStep: 0
    };

    setRecycleProgress(mockBooking);
    setCurrentStep(0);
    Alert.alert('预约成功', `回收单号：${mockBooking.id}\n预计${mockBooking.estimatedTime}完成`);
  };

  // 渲染AI估价组件
  const renderAIQuickValuation = () => (
    <View style={styles.tabContent}>
      <Text style={styles.sectionTitle}>🚀 AI快速估价</Text>
      
      {/* 图片上传区域 */}
      <View style={styles.imageUploadSection}>
        <Text style={styles.uploadTitle}>上传车辆图片</Text>
        <View style={styles.uploadButtons}>
          <TouchableOpacity style={styles.uploadButton} onPress={takePhoto}>
            <Text style={styles.uploadButtonText}>📸 拍照</Text>
          </TouchableOpacity>
          <TouchableOpacity style={styles.uploadButton} onPress={selectImage}>
            <Text style={styles.uploadButtonText}>🖼️ 选择图片</Text>
          </TouchableOpacity>
        </View>
        
        {/* 已上传图片预览 */}
        {vehicleImages.length > 0 && (
          <View style={styles.imagePreviewContainer}>
            <Text style={styles.previewTitle}>已上传图片 ({vehicleImages.length})</Text>
            <ScrollView horizontal showsHorizontalScrollIndicator={false}>
              {vehicleImages.map((uri, index) => (
                <Image key={index} source={{ uri }} style={styles.imagePreview} />
              ))}
            </ScrollView>
          </View>
        )}
      </View>

      {/* 估价按钮 */}
      <TouchableOpacity 
        style={[styles.valuationButton, isValuating && styles.valuationButtonDisabled]}
        onPress={performAIQuickValuation}
        disabled={isValuating}
      >
        {isValuating ? (
          <ActivityIndicator color="#fff" />
        ) : (
          <Text style={styles.valuationButtonText}>⚡ AI快速估价 (5秒)</Text>
        )}
      </TouchableOpacity>

      {/* 估价结果 */}
      {valuationResult && (
        <View style={styles.valuationResult}>
          <Text style={styles.resultTitle}>估价结果</Text>
          <Text style={styles.resultPrice}>¥{valuationResult.estimatedPrice.toLocaleString()}</Text>
          <Text style={styles.resultConfidence}>置信度: {valuationResult.confidence}%</Text>
          <Text style={styles.resultTime}>处理时间: {valuationResult.timeToProcess}秒</Text>
          <View style={styles.factorsContainer}>
            <Text style={styles.factorsTitle}>影响因素:</Text>
            {valuationResult.factors.map((factor, index) => (
              <Text key={index} style={styles.factor}>• {factor}</Text>
            ))}
          </View>
        </View>
      )}
    </View>
  );

  // 渲染市场行情组件
  const renderMarketData = () => (
    <View style={styles.tabContent}>
      <Text style={styles.sectionTitle}>📊 实时市场行情</Text>
      
      {marketData && (
        <View style={styles.marketDataContainer}>
          <View style={styles.marketCard}>
            <Text style={styles.marketCardTitle}>平均价格</Text>
            <Text style={styles.marketCardValue}>¥{marketData.averagePrice.toLocaleString()}</Text>
          </View>
          
          <View style={styles.marketCard}>
            <Text style={styles.marketCardTitle}>价格区间</Text>
            <Text style={styles.marketCardValue}>
              ¥{marketData.priceRange.min.toLocaleString()} - ¥{marketData.priceRange.max.toLocaleString()}
            </Text>
          </View>
          
          <View style={styles.marketCard}>
            <Text style={styles.marketCardTitle}>市场趋势</Text>
            <Text style={[
              styles.marketCardValue,
              { color: marketData.marketTrend === 'up' ? '#4CAF50' : 
                       marketData.marketTrend === 'down' ? '#F44336' : '#FF9800' }
            ]}>
              {marketData.marketTrend === 'up' ? '📈 上涨' : 
               marketData.marketTrend === 'down' ? '📉 下跌' : '➡️ 稳定'}
            </Text>
          </View>
          
          <View style={styles.marketCard}>
            <Text style={styles.marketCardTitle}>最后更新</Text>
            <Text style={styles.marketCardValue}>{marketData.lastUpdate}</Text>
          </View>
        </View>
      )}
      
      <Text style={styles.marketNote}>
        💡 市场数据每30秒自动更新，确保价格准确性
      </Text>
    </View>
  );

  // 渲染预约回收组件
  const renderRecycleBooking = () => (
    <View style={styles.tabContent}>
      <Text style={styles.sectionTitle}>📅 预约回收</Text>
      
      {/* 车辆信息表单 */}
      <View style={styles.formSection}>
        <Text style={styles.formTitle}>车辆信息</Text>
        
        <SimplePicker
          label="品牌"
          value={vehicleInfo.brand}
          options={brandOptions}
          onValueChange={(value) => setVehicleInfo(prev => ({ ...prev, brand: value }))}
        />
        
        <SimplePicker
          label="型号"
          value={vehicleInfo.model}
          options={modelOptions}
          onValueChange={(value) => setVehicleInfo(prev => ({ ...prev, model: value }))}
        />
        
        <SimplePicker
          label="车况"
          value={vehicleInfo.condition}
          options={conditionOptions}
          onValueChange={(value) => setVehicleInfo(prev => ({ ...prev, condition: value }))}
        />
      </View>
      
      {/* 预约时间选择 */}
      <View style={styles.formSection}>
        <Text style={styles.formTitle}>预约时间</Text>
        <SimplePicker
          label="时间"
          value={selectedTime}
          options={timeOptions}
          onValueChange={setSelectedTime}
        />
      </View>
      
      {/* 回收地点选择 */}
      <View style={styles.formSection}>
        <Text style={styles.formTitle}>回收地点</Text>
        <SimplePicker
          label="地点"
          value={selectedLocation}
          options={locationOptions}
          onValueChange={setSelectedLocation}
        />
      </View>
      
      {/* 预约按钮 */}
      <TouchableOpacity style={styles.bookingButton} onPress={bookRecycle}>
        <Text style={styles.bookingButtonText}>🚀 立即预约回收</Text>
      </TouchableOpacity>
    </View>
  );

  // 渲染进度追踪组件
  const renderProgressTracker = () => (
    <View style={styles.tabContent}>
      <Text style={styles.sectionTitle}>📊 回收进度追踪</Text>
      
      {recycleProgress ? (
        <View style={styles.progressContainer}>
          <View style={styles.progressHeader}>
            <Text style={styles.progressTitle}>回收单号: {recycleProgress.id}</Text>
            <Text style={styles.progressStatus}>状态: {recycleProgress.status}</Text>
            <Text style={styles.progressTime}>预计完成: {recycleProgress.estimatedTime}</Text>
          </View>
          
          {/* 进度步骤 */}
          <View style={styles.progressSteps}>
            {recycleSteps.map((step, index) => (
              <View key={index} style={styles.progressStep}>
                <View style={[
                  styles.stepIndicator,
                  index <= currentStep ? styles.stepCompleted : styles.stepPending
                ]}>
                  <Text style={styles.stepNumber}>{index + 1}</Text>
                </View>
                <Text style={[
                  styles.stepText,
                  index <= currentStep ? styles.stepTextCompleted : styles.stepTextPending
                ]}>
                  {step}
                </Text>
                {index < recycleSteps.length - 1 && (
                  <View style={[
                    styles.stepLine,
                    index < currentStep ? styles.stepLineCompleted : styles.stepLinePending
                  ]} />
                )}
              </View>
            ))}
          </View>
          
          <Text style={styles.progressNote}>
            ⏰ 当前进度: {currentStep + 1}/{recycleSteps.length}
          </Text>
        </View>
      ) : (
        <View style={styles.noProgress}>
          <Text style={styles.noProgressText}>暂无回收订单</Text>
          <Text style={styles.noProgressSubtext}>请先预约回收服务</Text>
        </View>
      )}
    </View>
  );

  return (
    <ScrollView style={styles.container}>
      {/* 头部横幅 */}
      <View style={styles.header}>
        <Text style={styles.title}>⚡ 急速回收</Text>
        <Text style={styles.subtitle}>5分钟估价 · 1小时回收 · 即时到账</Text>
      </View>
      
      {/* 快速操作区 */}
      <View style={styles.quickActions}>
        <TouchableOpacity style={styles.actionButton} onPress={takePhoto}>
          <Text style={styles.actionText}>📸 拍照估价</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.actionButton} onPress={selectImage}>
          <Text style={styles.actionText}>🖼️ 选择图片</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.actionButton} onPress={() => setActiveTab('booking')}>
          <Text style={styles.actionText}>🚗 上门评估</Text>
        </TouchableOpacity>
      </View>
      
      {/* 标签页切换 */}
      <View style={styles.tabContainer}>
        <TouchableOpacity 
          style={[styles.tab, activeTab === 'valuation' && styles.activeTab]}
          onPress={() => setActiveTab('valuation')}
        >
          <Text style={[styles.tabText, activeTab === 'valuation' && styles.activeTabText]}>AI估价</Text>
        </TouchableOpacity>
        <TouchableOpacity 
          style={[styles.tab, activeTab === 'market' && styles.activeTab]}
          onPress={() => setActiveTab('market')}
        >
          <Text style={[styles.tabText, activeTab === 'market' && styles.activeTabText]}>市场行情</Text>
        </TouchableOpacity>
        <TouchableOpacity 
          style={[styles.tab, activeTab === 'booking' && styles.activeTab]}
          onPress={() => setActiveTab('booking')}
        >
          <Text style={[styles.tabText, activeTab === 'booking' && styles.activeTabText]}>预约回收</Text>
        </TouchableOpacity>
        <TouchableOpacity 
          style={[styles.tab, activeTab === 'progress' && styles.activeTab]}
          onPress={() => setActiveTab('progress')}
        >
          <Text style={[styles.tabText, activeTab === 'progress' && styles.activeTabText]}>进度追踪</Text>
        </TouchableOpacity>
      </View>
      
      {/* 内容区域 */}
      {activeTab === 'valuation' && renderAIQuickValuation()}
      {activeTab === 'market' && renderMarketData()}
      {activeTab === 'booking' && renderRecycleBooking()}
      {activeTab === 'progress' && renderProgressTracker()}
      
      {/* 底部操作区 */}
      <View style={styles.bottomActions}>
        <TouchableOpacity 
          style={styles.primaryButton}
          onPress={() => setActiveTab('booking')}
        >
          <Text style={styles.primaryButtonText}>🚀 开始急速回收</Text>
        </TouchableOpacity>
      </View>
    </ScrollView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#f5f5f5',
  },
  header: {
    backgroundColor: '#007AFF',
    padding: 20,
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#fff',
    marginBottom: 5,
  },
  subtitle: {
    fontSize: 14,
    color: '#fff',
    opacity: 0.9,
  },
  quickActions: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: 15,
    backgroundColor: '#fff',
    marginHorizontal: 15,
    marginTop: -20,
    borderRadius: 10,
    elevation: 3,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
  },
  actionButton: {
    backgroundColor: '#f0f0f0',
    paddingHorizontal: 15,
    paddingVertical: 10,
    borderRadius: 20,
    minWidth: 80,
    alignItems: 'center',
  },
  actionText: {
    fontSize: 12,
    color: '#333',
  },
  tabContainer: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    marginHorizontal: 15,
    marginTop: 15,
    borderRadius: 10,
    overflow: 'hidden',
  },
  tab: {
    flex: 1,
    paddingVertical: 12,
    alignItems: 'center',
  },
  activeTab: {
    backgroundColor: '#007AFF',
  },
  tabText: {
    fontSize: 14,
    color: '#666',
  },
  activeTabText: {
    color: '#fff',
    fontWeight: 'bold',
  },
  tabContent: {
    backgroundColor: '#fff',
    marginHorizontal: 15,
    marginTop: 15,
    padding: 20,
    borderRadius: 10,
  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 20,
    textAlign: 'center',
  },
  imageUploadSection: {
    marginBottom: 20,
  },
  uploadTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 15,
  },
  uploadButtons: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    marginBottom: 20,
  },
  uploadButton: {
    backgroundColor: '#007AFF',
    paddingHorizontal: 20,
    paddingVertical: 12,
    borderRadius: 25,
    minWidth: 100,
    alignItems: 'center',
  },
  uploadButtonText: {
    color: '#fff',
    fontSize: 14,
    fontWeight: '600',
  },
  imagePreviewContainer: {
    marginTop: 15,
  },
  previewTitle: {
    fontSize: 14,
    color: '#666',
    marginBottom: 10,
  },
  imagePreview: {
    width: 80,
    height: 80,
    borderRadius: 8,
    marginRight: 10,
  },
  valuationButton: {
    backgroundColor: '#4CAF50',
    paddingVertical: 15,
    borderRadius: 25,
    alignItems: 'center',
    marginBottom: 20,
  },
  valuationButtonDisabled: {
    backgroundColor: '#ccc',
  },
  valuationButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  valuationResult: {
    backgroundColor: '#f8f9fa',
    padding: 20,
    borderRadius: 10,
    borderLeftWidth: 4,
    borderLeftColor: '#4CAF50',
  },
  resultTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  resultPrice: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#4CAF50',
    marginBottom: 5,
  },
  resultConfidence: {
    fontSize: 14,
    color: '#666',
    marginBottom: 5,
  },
  resultTime: {
    fontSize: 14,
    color: '#666',
    marginBottom: 10,
  },
  factorsContainer: {
    marginTop: 10,
  },
  factorsTitle: {
    fontSize: 14,
    fontWeight: '600',
    color: '#333',
    marginBottom: 5,
  },
  factor: {
    fontSize: 14,
    color: '#666',
    marginLeft: 10,
  },
  marketDataContainer: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
  },
  marketCard: {
    backgroundColor: '#f8f9fa',
    padding: 15,
    borderRadius: 8,
    width: '48%',
    marginBottom: 15,
    alignItems: 'center',
  },
  marketCardTitle: {
    fontSize: 12,
    color: '#666',
    marginBottom: 8,
  },
  marketCardValue: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    textAlign: 'center',
  },
  marketNote: {
    fontSize: 12,
    color: '#666',
    textAlign: 'center',
    marginTop: 15,
    fontStyle: 'italic',
  },
  formSection: {
    marginBottom: 20,
  },
  formTitle: {
    fontSize: 16,
    fontWeight: '600',
    color: '#333',
    marginBottom: 15,
  },
  formRow: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 15,
  },
  formLabel: {
    fontSize: 14,
    color: '#333',
    width: 60,
  },
  pickerButton: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: '#f8f9fa',
    paddingHorizontal: 15,
    paddingVertical: 12,
    borderRadius: 8,
    borderWidth: 1,
    borderColor: '#e0e0e0',
  },
  pickerButtonText: {
    fontSize: 14,
    color: '#333',
  },
  chevron: {
    fontSize: 12,
    color: '#666',
  },
  modalOverlay: {
    flex: 1,
    backgroundColor: 'rgba(0,0,0,0.5)',
    justifyContent: 'flex-end',
  },
  modalContent: {
    backgroundColor: '#fff',
    borderTopLeftRadius: 20,
    borderTopRightRadius: 20,
    maxHeight: '70%',
  },
  modalHeader: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  modalTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    color: '#333',
  },
  closeButton: {
    fontSize: 24,
    color: '#666',
  },
  optionsList: {
    maxHeight: 400,
  },
  optionItem: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#f0f0f0',
  },
  optionText: {
    fontSize: 16,
    color: '#333',
  },
  selectedIcon: {
    fontSize: 18,
    color: '#007AFF',
    fontWeight: 'bold',
  },
  bookingButton: {
    backgroundColor: '#FF9800',
    paddingVertical: 15,
    borderRadius: 25,
    alignItems: 'center',
    marginTop: 20,
  },
  bookingButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
  progressContainer: {
    backgroundColor: '#f8f9fa',
    padding: 20,
    borderRadius: 10,
  },
  progressHeader: {
    marginBottom: 20,
    paddingBottom: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#e0e0e0',
  },
  progressTitle: {
    fontSize: 16,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 5,
  },
  progressStatus: {
    fontSize: 14,
    color: '#666',
    marginBottom: 5,
  },
  progressTime: {
    fontSize: 14,
    color: '#666',
  },
  progressSteps: {
    marginBottom: 20,
  },
  progressStep: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 15,
  },
  stepIndicator: {
    width: 30,
    height: 30,
    borderRadius: 15,
    alignItems: 'center',
    justifyContent: 'center',
    marginRight: 15,
  },
  stepCompleted: {
    backgroundColor: '#4CAF50',
  },
  stepPending: {
    backgroundColor: '#ccc',
  },
  stepNumber: {
    color: '#fff',
    fontSize: 14,
    fontWeight: 'bold',
  },
  stepText: {
    fontSize: 14,
    flex: 1,
  },
  stepTextCompleted: {
    color: '#333',
    fontWeight: '600',
  },
  stepTextPending: {
    color: '#999',
  },
  stepLine: {
    width: 2,
    height: 20,
    marginLeft: 15,
  },
  stepLineCompleted: {
    backgroundColor: '#4CAF50',
  },
  stepLinePending: {
    backgroundColor: '#ccc',
  },
  progressNote: {
    fontSize: 12,
    color: '#666',
    textAlign: 'center',
    fontStyle: 'italic',
  },
  noProgress: {
    alignItems: 'center',
    padding: 40,
  },
  noProgressText: {
    fontSize: 16,
    color: '#999',
    marginBottom: 5,
  },
  noProgressSubtext: {
    fontSize: 14,
    color: '#ccc',
  },
  bottomActions: {
    padding: 20,
    marginTop: 20,
  },
  primaryButton: {
    backgroundColor: '#007AFF',
    paddingVertical: 15,
    borderRadius: 25,
    alignItems: 'center',
  },
  primaryButtonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default RapidRecycleScreen; 